@charset "utf-8";
/* CSS Document */  

html { font-family:Arial, Helvetica, sans-serif;  font-size: 16px;  margin:0; padding:0;}
body { background-color:fff; font-family: "Lexend", sans-serif; font-size: 14px;   margin: 0; padding: 10px 0 10px 0; color:#5c5c5c; line-height:1.5; }		

.lexend-<uniquifier> { font-family: "Lexend", sans-serif; font-optical-sizing: auto; font-weight: <weight>;	 font-style: normal; }        /* weight 0de 100 à 900  - au besoin :  style= "font-style: italic;"    */
 
.blanc { color: #fff; }	
.bleu { color:#00a2c8; }  	
.gris { color:#5c5c5c; }  
.grisc { color:#9D9D9D; }   
.orange { color:#ff8c00; }   
.brique { color:#EB3333; } 
.bleucongres { color:#0b4351;  }  /* texte page spéciale Congrès */

.gristc {background-color:#f8f8f8; }  /* background rectangle gris très clair  */
.grisj {background-color:#f7f1ed; }  /* background rectangle gris jaune clair   f9f0ea */

.astro { color:#3b4396; }       /* couleurs des rubriques  */
.geologie { color:#ab773a; }     
.physique  { color:#e83233; }
.biochimie  { color:#5cc229; }
.info  { color:#3431f0; }
.reflexion { color:#599191; }   
.biologie { color:#00baff; }
.bible { color:#ff8c00; } 
.histoire { color:#cd9ed1; }    


.r04 { font-size:.4em; }
.r045 { font-size:.45em; }	
.r05 { font-size:.5em; }
.r055 { font-size:.55em; }	
.r06 { font-size:.6em; }
.r065 { font-size:.65em; }
.r07 { font-size:.7em; }
.r075 { font-size:.75em; }
.r08 { font-size:.8em; }
.r085 { font-size:.85em; }
.r09 { font-size:.9em; }
.r10 { font-size:1em; }	  /* normal  */
.r11 { font-size:1.1em; }
.r12 { font-size:1.2em; }
.r13 { font-size:1.3em; }
.r15 { font-size:1.5em; }
.r16 { font-size:1.6em; }
.r18 { font-size:1.8em; }
.r20 { font-size:2em; }
.r22 { font-size:2.2em; }
.r25 { font-size:2.5em; }
.r30 { font-size:3em; }
.r40 { font-size:4em; }


.b20 { font-weight:200; }	/* fin */
.b25 { font-weight:250; }	/* fin */
.b40 { font-weight:400; }   /* normal */
.b60 { font-weight:600; }	/* gras */
.b90 { font-weight:900; }	/* tres gras */


.hgt05 { line-height:0.5 ; } 
.hgt06 { line-height:0.6 ; } 
.hgt07 { line-height:0.7 ; }  /* ex 09  */
.hgt08 { line-height:0.8; }	/* ex 10  */
.hgt09 { line-height:0.9; }	/* ex 11  */

.decal { position: relative; top: -5px; }  /* decalage position verticale sur la ligne */
.tronq { display:inline; } /* classe utilisée pour repèerr les phrases à tronquer (en js)  */


.b { font-weight:600; }
.gras { font-weight:600; }
.u { text-decoration:underline; }
.i { font-style:italic; }
.normal { font-weight:normal; }

	a img {border:none;}
	
	a	{ color:#5c5c5c; text-decoration:none; }
	a:hover { color:#5c5c5c; text-decoration:underline;  }	
	a.ss	{ color:#5c5c5c; text-decoration:none; }
	a.ss:hover { color:#5c5c5c; text-decoration:none;  }	/* identique mais sans le soulignemen  */
	a.bc   {color:#ffffff; text-decoration:none; }
	a.bc:hover { color:#ffffff; text-decoration:underline;  }
	a.gr   {color:#9d9d9d; text-decoration:none; }
	a.gr:hover { color:#ffffff; text-decoration:underline;  }
	a.pvus   {color:#5c5c5c; font-weight:600; text-decoration:none; }
	a.pvus:hover { color:#00a2c8; font-weight:600; text-decoration:none;  }
	
	a.lienart { color:#00a2c8; text-decoration:none; }   /* utilisé pour le texte des notes des articles ou vidéos dans la BD  */
	a.lienart:hover { color:#00a2c8; text-decoration:underline; } 

	.lien-anime { color: #5c5c5c; text-decoration: none; position: relative; padding-bottom: 2px; background-image: linear-gradient(#00a2c8, #00a2c8); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 2px; 
	transition: background-size 0.3s ease; line-height:2}
	.lien-anime:hover { text-decoration: none; background-size: 100% 2px;  }	
	.lien-animebc { color: #fff; text-decoration: none; position: relative; padding-bottom: 2px; background-image: linear-gradient(#fff, #fff); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 2px; 
	transition: background-size 0.3s ease; line-height:1.5}
	.lien-animebc:hover { color: #fff; text-decoration: none; background-size: 100% 2px;  }
	.lien-animebl { color: #00a2c8; text-decoration: none; position: relative; padding-bottom: 2px; background-image: linear-gradient(#00a2c8, #00a2c8); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 2px; 
	transition: background-size 0.3s ease; line-height:2}
	.lien-animebl:hover { color: #00a2c8; text-decoration: none; background-size: 100% 2px;  }	
	
	.lien-div  { display:block; color: inherit;  }	/* lien sur un div entier  */
	
	.opacite  { transition: opacity 0.3s ease; }             /* avec le suivant : ajoute un effet d'opacité changée au survol sur cette image  */
	.opacite:hover { opacity: 0.5; } 

.redim { max-width:100%; height:auto; width:auto; }
.coin { border-radius: 10px;  }    /*  border-top-right-radius:  */
.clear { clear:both; }

h1 { display: inline; font-size:1em;  }
h2 { display: inline; font-size:1em;  }
h3 { display: inline; font-size:1em;  }

hr { border: none; height: 2px; background-color: #e8e8e8; }  /*  ligne  */




.header { width:100%; position: relative;  position: fixed;  top: 0; z-index:1000; background-color:#fff;}
.menu { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; position:relative; }	  /* ligne de menu répartit les 3 éléments : logo - ligne liste menu - bouton Burger  */
	.logo { background-color:#fff; padding-left:25px;}
	.menuli { background-color:#fff; }
	.burger { background-color:#fff; padding-right:20px; }
		.cache { display: none; }    /* concerne le menu mobile - caché ou affiché */
		.affiche { font-size:1.1em; display: block; margin-top: 10px; padding: 15px 25px 10px 15px; background-color: rgba(230,230,230,0.9); z-index:200;  position: absolute; top:42px;   right: 0;}  /* div du menu Mobile  */
		/*  burfin est le div qui remmplace le symbole du burger lorsqu'il est absent - il est défini selon la largeur dans les media queries  */
		
		.search-box { width:100%; display: inline-flex; align-items: center; border: 2px solid #fff; border-radius: 2px; padding: 2px 2px 2px 8px;  background-color: rgba(20,20,20,0.5);  }  /*  max-width: 300px;  */
		.search-box:focus-within { border-color: #ff8c00; }
		.search-box button { background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 8px; color: #fff; }
		.search-box button:hover { color: #ff8c00; }
		.search-box input { border: none; outline: none; padding: 8px 4px; width: 100%; font-size: 1em; background: transparent; color:#fff; }
		.visually-hidden { position: absolute; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; width: 1px; overflow: hidden; white-space: nowrap; }
		.repart {  margin-left:5px; width:100%; display: flex; justify-content: space-between; }   /* répartit les éléments sur la largeur  */
	
		.footcol { padding: 2%; }
		.copyr { width:100%; padding-bottom:40px; background-color:#00395a; color:#9d9d9d; font-size:0.9em; text-align:center; }


.container { max-width: 1300px;  margin: 0 auto; padding: 0 10px 0 10px; }	  
	.entete { margin: 4% auto 5% auto;  background-color:#fff; padding-bottom:4%; }    /* recoit le premier article  - pleine largeur */
	.entetim { margin: 0 auto; width:100%; }    /* font-size augmenté >768 px  */
	
	.bloc2  { width:100%; padding-bottom:20px;}		/* bloc d'une ligne de 2 elements - 2 blocs permettent 4 images  */
		.elta { width:47%; margin-right:6%; float:left; }	/* élément de gauche - image et texte  */
		.eltb { width:47%; margin:0; float:left; }	        /* élément de droite - image et texte  */
		

	.bloc4 { width:96%; padding:20px 2% 15px 2%; }		/* pour recevoir 4 éléments l'un sous l'autre  */	
		.eltc { display: block;   display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #e8e8e8; padding-top:5px;}
			.imgc { width:25%;  }
			.txtc { width: 73%; height:100%; padding: 0 1% 0 1%; font-size:1em; flex:1; }
			
	.blocplus { width:96%; padding: 5px 2% 15px 2%;  border-radius: 20px 0 20px 0;}	/* les 5 plus vus  border: solid 1px #e8e8e8; */
		.plus { margin-top:10px; padding: 0 3px 5px 5px; width:80px; float:right; background-color:#fff; border: 1px solid #e8e8e8; border-radius:5px; line-height:0.8;}
		.plusb { margin-top:10px; padding: 0 3px 5px 5px; width:100px; float:right; background-color:#fff; border: 1px solid #e8e8e8; border-radius:5px; line-height:0.8;}  /* pour Carousel boutique  */


	.blocserie { width:96%; padding: 5px 2% 15px 2%;  border-radius: 20px 0 20px 0; }	/* les series   border: solid 1px #e8e8e8;*/
			.liserie { display: block;   display: flex; align-items: center; gap: 10px; }   /* ligne de l'image + texte  */
			.imgser { width:25px;  }
			.txtser { font-size:1em; flex:1; }
			
	.blocevent { width:96%; padding: 15px 2% 15px 2%;  border-radius: 0 20px 0 20px;  background-color:#f8f8f8; }	/* les series  border: solid 1px #e8e8e8; */
			.lisevent { display: block;  padding: 10px 5px 10px 5px; display: flex; align-items: flex-start; gap: 20px; }   /* /* ligne de l'image + texte  - donc au début de l'axe secondaire => align-items: flex-start; */
			.imgevent { width:135px;  }
			.txtevent { font-size:1em; flex:1; }	
						
	.carouboutique { padding:35px 10px 25px 0; margin:0;  border-radius: 0 20px 0 20px;   background-color: #d9d9d9; }  /* border: solid 1px #e8e8e8; (to left, #fff, #f2fbff)   background: linear-gradient(#fff, #f2fbff); */
			/*  carougauche et caroudroit varient selon la largeur  */
			.carousel-container { display: flex; align-items: center; max-width: 900px; margin: auto; position: relative; }			
			.carousel-track-wrapper { overflow: hidden; width: 100%; }			
			.carousel-track { display: flex; gap: 0; transition: transform 0.4s ease-in-out; }			/*  gap:20 px  */
			.carousel-track img { width: 50%; flex-shrink: 0; object-fit: cover; }			            /*  width: calc(50% - 18 px)  */
			button { background-color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0); border: none; cursor: pointer; padding: 10px; z-index: 10; }
		
		.citation { margin-bottom:50px; width:92%; padding: 2% 4% 2% 4%; display: flex; align-items: center; gap: 15px; border-radius: 0 0 0 20px; border: 1px solid #00a2c8; line-height:1.1;}	/* Citation */
			.txtcita { font-size:1.1em; flex:1; align-items: flex-start; }	
			.imgcita { width:135px; }
	
		.txt { width:100%; text-align:left; font-size:1em;  }  /* texte article  */

/*  pages articles et listing */
.lineup {height:2px; padding:0; width:100%; position:fixed;  top: 45px; border:none;}
	.rectinfo { width:95%; padding: 10px 6px 10px 6px; background-color:#f8f8f8; border-radius: 6px; }   /* passe à 50 % >768 px  */
	.rectbref { width:95%; padding: 10px 5px 10px 5px; background-color:#fff; border-radius: 6px; border:1px solid #dcdcdc; }  /* En bref - passe à 50% > 768 px  */
		.lisbref { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; padding-top:10px;}   /* ligne du losange + texte dans rectangle En bref */
			.imgbref { width:15px; padding-left:20px; line-height:1;}
			.txtbref { font-size:1em;  }
	.recommandation { display: flex; flex-wrap: wrap;  gap: 10px;  justify-content: left; }	  /*  éléments recommandés en bas de la page Article  - ou - éléments de la page de Listing  - ou liste de rectangle des Noms de rubriques */
		.bloc { width:150px; margin-bottom:50px;}				/* change taille à 768 414 et 1000 px  contient les images des listses dans listing */

			
	.conseil {  width:100%; margin: 0; text-align:center; font-size:.85em; color: #fff; background-color: #999;}

	
.ig100 {width:96%; padding: 0 2% 0 2%; font-size: .7em; color:#5c5c5c; }
.ig60	{width:46%; margin: 0 auto; padding: 0 2% 0 2%; font-size: .7em; color:#5c5c5c; }

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;} 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.recrub { width:150 px; padding:5px;}  /* rectangle entourant le nom de la rubrique dans les pages de listing  */
	.tour { border-radius: 4px; border:1px solid #00a2c8;   }  /* border ajouté au rectangle de la rubrique choisie  */

.serixx { display: flex; flex-direction: row; align-items: flex-start; gap: 10px;  padding-top:5px;}  /* image série et description de la série  - page listing serie */
	.imgautr { width:30%; max-width:170px; }	/* image de l'auteur dans page listing  */
	.imgeventx { width:160px; flex-shrink: 0;}	/* image de l'événement dans la page des événements futurs augmente dés 768 px */
	.imgeventxc { width:135px; flex-shrink: 0;}	/* image de l'événement dans la page des événements  passés */	
	.imgmoter  { width:55px; flex-shrink: 0;}	/* image de la liste du moteur de recherche */
	.imgserxx { width:140px; flex-shrink: 0;}	/* image de la série dans page listing  */
	.txtserxx { font-size:1em; flex: 1; }		/* texte de la série dans page listing - et la page des événements */


.pagination { margin-top: 20px;  }			/*  pour moteur de recherche - page recherche.php  */
.pagination a, .pagination span { padding: 8px 12px; border: 1px solid #ccc; margin-right: 5px; text-decoration: none; color: #333; }
.pagination .active { background-color: #007BFF; color: white; border-color: #007BFF; }
.pagination a:hover:not(.active) { background-color: #f1f1f1; }

.Col-GP  { width:36%; height:auto; padding:1%;  background-color: #28444f; font-size: .9em; color:#FFF; float:left; }
.Col-DP  { width:50%; height:auto; padding:0 1% 1% 1%;  font-size: .9em; color:#28444f; float:left; }

@media screen and (min-width: 50px) 
{   
.container { margin: 0 auto; padding: 0 15px 0 15px; }	  
.colA { width:100%; clear : both; }
.colV { display:none; }
.colB { display:none; }
.burger { display:inline; }
.menuli { display:none; }
.burfin { display:none; }
.banniere { height:240px;  background-image: url('../RElements/bible-science-b.jpg'); background-size: cover; background-position: center; position:relative; margin-top:45px;}
	.bannieremr { height:240px;  background-image: url('../RElements/moteurrecherche.jpg'); background-size: cover; background-position: center; position:relative; margin-top:45px;}  /* image moteur recherche */

 .centreba { width: 300px; padding: 0;  z-index:150;  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color:#fff; font-size:.9em; }  /*  background-color: rgba(230,230,230,0.9);  */
.titreban { font-size:1.7em; font-weight:800; display: inline-block; width: 100%; text-align: center; }
.footerA { width:100%; background-color:#00395a; color:#fff; font-size:1.1em; line-height:2; display: flex; flex-direction: row; justify-content: space-between; align-items: center; align-items: flex-start;}
.footerB { display:none;}
.non  { display:block;  }
.oui { display:none;  }
.carougauche { width:100%; padding: 0; float:left; }
.caroudroit { display:none; }

.article { width:98%; padding: 0 1% 0 1%; }
	.artete { width:100%; font-size:1.8em; line-height:1.2; }  /* image et titre  */

}

@media screen and (min-width: 414px) 
{   
.colA { width:100%; clear : both; }
.colV { display:none; }
.colB { display:none; }
.centreba { width: 350px; padding: 0;  z-index:150;  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color:#fff; font-size:1em; }  /*  background-color: rgba(230,230,230,0.9);  */
.titreban { font-size:1.9em; font-weight:800; display: inline-block; width: 100%; text-align: center; }
	.artete { width:100%; font-size:2.1em; line-height:1.2; }  /* image et titre centrés */
.bloc { width:160px; }
}						


@media screen and (min-width: 768px) 
{   
.container { margin: 0 auto; padding: 0 20px 0 20px; }	  /* Passage en 2 colonnes - Tablettes en mode Portrait - à partir de 768px */
.entetim { margin: 0 auto; width:100%; font-size:1.2em; }
.colA { width: 54%; float: left; }
.colV { display:block; width: 10%; float: left; }
.colB { display:block; width: 36%; float: left; }
.banniere { height:300px; background-image: url('../RElements/bible-science-b.jpg'); background-size: cover; background-position: center; position:relative; }
	.bannieremr { height:300px; background-image: url('../RElements/moteurrecherche.jpg'); background-size: cover; background-position: center; position:relative; }	/* image moteur recherche  */

.titreban { font-size:1.7em; font-weight:800; display: inline-block; width: 100%; text-align: center; }
.footerA { display:none; }
.footerB { width:100%; background-color:#00395a; color:#fff; font-size:1.1em; line-height:1.5; display: flex; flex-direction: row; justify-content: space-between; align-items: center; align-items: flex-start;}
.non  { display:none;  }
.oui { display:block;  }
.carougauche { width:67%; padding: 0; float:left; }
.caroudroit  { width:33%; padding:2% 0 2% 0; float:left; }		
	.artete { width:100%; font-size:3em; line-height:1.2; }  /* image et titre centrés */
	.rectinfo { width:49%; padding: 10px 6px 10px 6px; background-color:#f8f8f8; border-radius: 10px; }
	.rectbref { width:49%; padding: 10px 5px 10px 5px; background-color:#fff; border-radius: 6px; border:1px solid #dcdcdc; }
.bloc { width:200px; }
.imgeventx { width:250px; flex-shrink: 0;}	/* image de l'événement dans la page des événements  */

}						


@media screen and (min-width: 1000px) 
{   
.container { max-width: 1300px;  margin: 0 auto; padding: 0 20px 0 20px; }	  /* le menu burger disparait - et laisse la place au menu en ligne en toutes lettres */
.recrd { display:none; }
.burger { display:none; }
.menuli { display:inline; }
.burfin { display:inline; width:50px; }
	.artete { width:100%; font-size:3.2em; line-height:1.2;}  /* image et titre centrés */
.bloc { width:240px; }
}	

@media screen and (min-width: 1400px) 
{
.colA { width: 700px; float: left; }
.colV { width: 120px; float: left; }
.colB { width: 480px; float: left; }
.recrd { display:none; }
.banniere { height:300px; background-image: url('../RElements/bible-science-b.jpg'); background-size: cover; background-position: center; position:relative; }
	.bannieremr { height:300px; background-image: url('../RElements/moteurrecherche.jpg'); background-size: cover; background-position: center; position:relative; }	/* image moteur recherche

}